<template>
	<view>
		<view class="title">
			中级茶艺培训班
		</view>
		<view class="title">
			<view class="info-title">
				请您填写资料，带*号为必填项
			</view>
			<view class="info-item">
				<text style="color: red;">*</text> <text>姓名：</text> <u-input v-model="form.name" type="text"
					:border="false" maxlength="10" placeholder="请输入姓名" />
			</view>
			<view class="info-item">
				<text style="color: red;">*</text> <text>性别：</text> <u-radio-group v-model="form.sex"
					@change="radioGroupChange">
					<u-radio style="padding:0 20rpx;" @change="radioChange" v-for="(item, index) in list" :key="index"
						:name="item.id">
						{{item.name}}
					</u-radio>
				</u-radio-group>
			</view>
			<view class="info-item">
				<text style="color: red;">*</text> <text>出生日期：</text>
				<view @click="show = true">
					
					{{!form.birthday?'请选择日期':form.birthday}}
				</view><u-datetime-picker @cancel="show=false" @confirm="dateok" :show="show" v-model="value1"
					mode="date"></u-datetime-picker>


			</view>
			<view class="info-item">
				<text style="color: red;">*</text> <text>电话号码：</text> <input v-model="form.phone" type="number"
					placeholder="请填写手机号" maxlength="11" />
			</view>
			<view class="info-item">
				<text style="color: red;">*</text> <text>地址：</text><input v-model="form.detailedAddress" type="text"
					placeholder="请填写地址" maxlength="30" />
			</view>
			<view class="info-item" style="color: red; ">
				</text> <text>订单金额:</text>
				<view>
					{{info.costMoney}}
				</view>
			</view>
		</view>
		<view class="liji-btn" @click="toming">
			立即预约
		</view>
	</view>
</template>

<script>
	import {
		curriculumdetail,
		memberCurriculumadd
	} from "@/api/home/index.js"
	export default {
		data() {
			return {
				id: '',
				info: {},
				show: false,
				value1: Number(new Date()),
				form: {
					name: '',
					sex: 0,
					birthday: '',
					phone: '',
					address: ''
				},
				list: [{
						name: '男',
						disabled: false,
						id: 1,
					},
					{
						name: '女',
						disabled: false,
						id: 2
					},

				],
			}
		},
		onLoad(val) {
			this.form = uni.getStorageSync('userInfo')
			this.form.sex = this.form.sex - 1 + 1
			console.log(this.form, 222222222);
			this.id = val.id
			// console.log(val, 22222222);
			this.forms()
		},
		methods: {
			async forms() {
				let res = await curriculumdetail({
					id: this.id
				})

				this.info = res.data
				console.log(this.info);
			},
			radioChange(e) {
				console.log(e);
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				// console.log(e);
			},
			dateok(val) {
				// console.log(val.value);
				this.form.birthday = this.timestampToDate(val.value)
				console.log(this.form.birthday);
				this.show = false

			},
			timestampToDate(timestamp) {
				const date = new Date(timestamp); // Unix 时间戳是以秒为单位的，所以需要乘以 1000 转换为毫秒  
				const year = date.getFullYear();
				const month = ("0" + (date.getMonth() + 1)).slice(-2); // getMonth() 方法返回的月份是从 0 开始的，所以需要加 1  
				const day = ("0" + date.getDate()).slice(-2);
				const hours = ("0" + date.getHours()).slice(-2);
				const minutes = ("0" + date.getMinutes()).slice(-2);
				const seconds = ("0" + date.getSeconds()).slice(-2);
				return `${year}-${month}-${day} `;
			},
			async toming() {
				console.log(this.form);
				if (this.form.name.length <= 0) {
					uni.showToast({
						title: '请输入姓名',
						icon: 'none'
					})
					return
				}
				if (this.form.phone.length <= 0) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return
				}
				if (this.form.detailedAddress.length <= 0) {
					uni.showToast({
						title: '请输入地址',
						icon: 'none'
					})
					return
				}
				if (this.form.birthday.length <= 0) {
					uni.showToast({
						title: '请输入生日',
						icon: 'none'
					})
					return
				}
				let res = await memberCurriculumadd({
					// memberId: '',
					curriculumId: this.info.id, //  课程id
					// curriculumCost: '', 
					// payFlag: '',
					birthday: this.form.birthday,
					name: this.form.name,
					phone: this.form.phone,
					detailedAddress: this.form.detailedAddress,
					sex: this.form.sex,
				})

				if (res.message == "请求成功") {
					uni.navigateTo({
						url: `/packageA/pages/pay/pay?id=${res.data}`
					})
				} else {
					uni.showToast({
						title: res.message,
						icon: "none"

					})

				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.title {
		margin: 20rpx 20rpx;
		box-sizing: border-box;
		border-radius: 30rpx;
		width: 710rpx;
		// font-weight: 700;
		padding: 20rpx;
		background-color: #fff;
		font-size: 32rpx;
	}

	.info-title {
		font-weight: 500;
		font-size: 28rpx;
		color: #666666;
		padding: 20rpx 0;
		text-align: center;
		border-bottom: 1rpx solid #eee;

	}

	.info-item {
		display: flex;
		align-items: center;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #eee;
	}

	.item-content {
		display: block;
		font-size: 28rpx;
		color: #666666;
		font-weight: 500;

	}

	.liji-btn {
		box-sizing: border-box;
		text-align: center;

		padding: 20rpx 0;
		margin: 30rpx;
		background-color: #fbdd00;
		border-radius: 30rpx;
		font-size: 36rpx;
		// font-weight: 700;
	}
</style>